<script setup lang="ts" name="JxtechDictionaryCascaderExt">
import { reactive, ref, Ref, watch, nextTick } from "vue";
import { JxtechDictionaryCascader } from "@whjxtech/jxtech-component";
import { commonListCascader } from "@/api/modules/org/code-list";

interface JxtechDictionaryCascaderExtProps {
  /**数据字典类型id */
  codeItemId: string;
  /**值 */
  value?: string | any[];
  /**具体查看element CascaderProps属性 */
  cascaderProps?: any;
  /**大小 */
  size?: "large" | "default" | "small";
  /**提示文字 */
  placeholder?: string;
  /**是否禁用 */
  disabled?: boolean;
  /**是否可清理 */
  clearable?: boolean;
  /**输入框中是否显示选中值的完整路径 */
  showAllLevels?: boolean;
  /**多选模式下是否折叠Tag */
  collapseTags?: boolean;
  /**当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。 要使用此属性，collapse-tags属性必须设定为 true */
  collapseTagsTooltip?: boolean;
}

const emit = defineEmits<{
  (e: "update:value", value: string | any[] | undefined): void; //更新属性值
  (e: "changeValue", value: string | any[] | undefined, node: any): void;
}>();

const props = withDefaults(defineProps<JxtechDictionaryCascaderExtProps>(), {
  cascaderProps: () => ({
    expandTrigger: "click",
    multiple: false,
    value: "id",
    label: "text",
    children: "children",
    disabled: "disabled",
    leaf: "leaf"
  }),
  size: "default",
  placeholder: "请选择",
  disabled: false,
  clearable: true,
  showAllLevels: true,
  collapseTagsTooltip: false
});

const modelValue = ref(props.value);
watch(
  () => modelValue.value,
  val => {
    emit("update:value", val);
  }
);
watch(
  () => props.value,
  val => {
    modelValue.value = val;
  }
);

const dictionaryCascaderChange = (value: string[], node: any) => {
  emit("changeValue", value, node);
};
const loadData = () => commonListCascader(props.codeItemId);
</script>

<template>
  <jxtech-dictionary-cascader
    :code-item-id="codeItemId"
    v-model:value="modelValue"
    :load-data="loadData"
    :cascader-props="cascaderProps"
    :size="size"
    :placeholder="placeholder"
    :disabled="disabled"
    :clearable="clearable"
    :show-all-levels="showAllLevels"
    :collapse-tags="collapseTags"
    :collapse-tags-tooltip="collapseTagsTooltip"
    @change-value="dictionaryCascaderChange"
  ></jxtech-dictionary-cascader>
</template>

<style lang="scss" scoped></style>
